import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col, DatePicker, Input, InputNumber, Tooltip, } from 'antd';
import axios from '../../components/Engineering/axios'
import ComboDisplayInputBox from './components/combo-display-input-box'
import '@/utils/app.css'

const { Option, OptGroup } = Select;
const FormItem = Form.Item;
const { Search, TextArea } = Input


class KimInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      disabled: true
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    return (
      <>
        <Card title='基本使用、密码框、带移除图标' style={{ marginTop: 10 }}>
          <Input placeholder="请输入" className='mr20' style={{ width: 200 }}  />
          <Input.Password placeholder="input password" className='mr20' style={{ width: 200 }} />
          <Input placeholder="input with clear icon" allowClear style={{ width: 200 }} />
        </Card>

        <Card title='<Input /> 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px' style={{ marginTop: 10 }}>
          <Input size="large" placeholder="large size" style={{ width: 200, marginRight: 20 }} />
          <Input placeholder="default size" style={{ width: 200, marginRight: 20 }} />
          <Input size="small" placeholder="small size" style={{ width: 200, marginRight: 20 }} />
        </Card>

        <Card title='基本使用' style={{ marginTop: 10 }}>
          <Search placeholder="input search text" onSearch={value => console.log(value)} style={{ width: 200, marginRight: 20 }} />
          <Search placeholder="input search text" onSearch={value => console.log(value)} enterButton style={{ width: 200, marginRight: 20 }} />
          <Search
            placeholder="input search text"
            enterButton="Search"
            onSearch={value => console.log(value)}
            style={{ width: 200, marginRight: 20 }} />
        </Card>

        <Card title='输入框的组合展现。注意：使用 compact 模式时，不需要通过 Col 来控制宽度' style={{ marginTop: 10 }}>
          <ComboDisplayInputBox />
        </Card>

        <Card title='用于 onSearch 的时候展示 loading' style={{ marginTop: 10 }}>
          <Search placeholder="input search loading deault" loading style={{ width: 200, marginRight: 20 }} />
          <Search placeholder="input search loading with enterButton" loading enterButton style={{ width: 200, marginRight: 20 }} />
        </Card>

        <Card title='适应文本高度的文本域,autoSize 属性适用于 textarea 节点，并且只有高度会自动变化,另外 autoSize 可以设定为一个对象，指定最小行数和最大行数' style={{ marginTop: 10 }}>
          <div>
            <TextArea placeholder="基于内容行自动调整高度" autoSize />
            <div style={{ margin: '24px 0' }} />
            <TextArea
              placeholder="最小和最大行数的自动尺寸高度"
              autoSize={{ minRows: 2, maxRows: 6 }}
            />
            <div style={{ margin: '24px 0' }} />
            <TextArea
              value={this.state.value || ''}
              onChange={({ target: { value } }) => this.setState({ value })}
              placeholder="控制自动大小"
              autoSize={{ minRows: 3, maxRows: 5 }}
            />
          </div>
        </Card>

        <Card title='在输入框上添加前缀或后缀图标' style={{ marginTop: 10 }}>
          <Input
            placeholder="请输入你的姓名"
            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
            suffix={
              <Tooltip title="Extra information">
                <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
              </Tooltip>
            }
            style={{width:200,marginRight:20}}
          />
          <Input prefix="￥" suffix="RMB"  style={{width:200}} />
        </Card>

      </>
    )

  }
}

export default Form.create({ name: 'KimInput' })(KimInput)

// API#
// Input#
// 参数	                    说明	类型	默认值	版本
// addonAfter	              带标签的 input，设置后置标签	string|ReactNode		
// addonBefore	            带标签的 input，设置前置标签	string|ReactNode		
// defaultValue	            输入框默认内容	string		
// disabled	                是否禁用状态，默认为 false	boolean	false	
// id	                      输入框的 id	string		
// maxLength	              最大长度	number		
// prefix	                  带有前缀图标的 input	string|ReactNode		
// size	                    控件大小。注：标准表单内的输入框大小限制为 large。可选 large default small	string	default	
// suffix	                  带有后缀图标的 input	string|ReactNode		
// type	                    声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。	string	text	
// value	                  输入框内容	string		
// onChange	                输入框内容变化时的回调	function(e)		3.9.3
// onPressEnter	            按下回车的回调	function(e)		
// allowClear	              可以点击清除图标删除内容	boolean		3.12.0
// 如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置。
// Input 的其他属性和 React 自带的 input 一致。

// Input.TextArea#
// 2.12 后新增的组件，旧版请使用 Input[type=textarea]。
// 参数	                   说明	类型	默认值	版本
// autoSize	               自适应内容高度，可设置为 true|false 或对象：{ minRows: 2, maxRows: 6 }。3.24.0 后 autosize 被废弃，请使用 autoSize。	boolean|object	false	3.24.0
// defaultValue	           输入框默认内容	string		
// value	                 输入框内容	string		
// onPressEnter	           按下回车的回调	function(e)		
// Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

// Input.Search#
// 参数	                 说明	类型	默认值	版本
// enterButton	         是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。	boolean|ReactNode	false	
// onSearch	             点击搜索或按下回车键时的回调	function(value, event)		
// loading	             搜索 loading	boolean		
// 其余属性和 Input 一致。

// Input.Group#
// 参数	                 说明	类型	默认值	版本
// compact	             是否用紧凑模式	boolean	false	
// size	Input.Group 中所有的 Input 的大小，可选 large default small	string	default	
// <Input.Group> <input /> <input /> </Input.Group>

// Input.Password (3.12.0 中新增)#
// 参数	                  说明	类型	默认值	版本
// visibilityToggle	      是否显示切换按钮	boolean	true	3.12.2
// FAQ#
// 为什么我动态改变 prefix/suffix 时，Input 会失去焦点？#
// 当 Input 动态添加或者删除 prefix/suffix 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 <span /> 来保持 DOM 结构不变：
// const suffix = condition ? <Icon type="smile" /> : <span />;
// <Input suffix={suffix} />;